import { useTheme } from '../context/ThemeContext';
import { AskForm } from '../types/forms';

interface AskFormViewProps {
    form: AskForm;
    onEdit?: () => void;
    onDelete?: () => void;
    canEdit?: boolean;
}

const AskFormView: React.FC<AskFormViewProps> = ({ 
    form,
    onEdit,
    onDelete,
    canEdit = false
}) => {
    const { theme } = useTheme();

    return (
        <div style={{ marginBottom: '20px' }}>
            <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between', 
                alignItems: 'center', 
                marginBottom: '20px' 
            }}>
                <h3 style={{ color: theme === 'light' ? '#666' : '#ccc', margin: 0 }}>基本信息</h3>
                {canEdit && (
                    <div style={{ display: 'flex', gap: '10px' }}>
                        <button
                            onClick={onEdit}
                            style={{
                                padding: '8px 16px',
                                backgroundColor: '#28a745',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}
                        >
                            更新
                        </button>
                        <button
                            onClick={onDelete}
                            style={{
                                padding: '8px 16px',
                                backgroundColor: '#dc3545',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}
                        >
                            删除
                        </button>
                    </div>
                )}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '10px' }}>
                <span style={{ color: theme === 'light' ? '#888' : '#aaa' }}>提交人：</span>
                <span>{form.submitter}</span>
                <span style={{ color: theme === 'light' ? '#888' : '#aaa' }}>所属公司：</span>
                <span>{form.company}</span>
                <span style={{ color: theme === 'light' ? '#888' : '#aaa' }}>所需部门：</span>
                <span>{form.department}</span>
                <span style={{ color: theme === 'light' ? '#888' : '#aaa' }}>岗位：</span>
                <span>{form.position}</span>
                <span style={{ color: theme === 'light' ? '#888' : '#aaa' }}>是否内审员：</span>
                <span>{form.isInternalAuditor ? '是' : '否'}</span>
            </div>

            <h3 style={{ color: theme === 'light' ? '#666' : '#ccc', marginTop: '20px', marginBottom: '10px' }}>问题描述</h3>
            <p style={{
                whiteSpace: 'pre-wrap',
                backgroundColor: theme === 'light' ? '#f5f5f5' : '#3a3f44',
                padding: '15px',
                borderRadius: '4px'
            }}>
                {form.question}
            </p>
        </div>
    );
};

export default AskFormView; 